import { Button, Input, Message, Modal } from "@arco-design/web-react";
import { IconClose, IconUser } from "@arco-design/web-react/icon";
import React, { useState } from "react";
import { LeoAvatar } from "../../../components/leo_Avatar";
import { useDispatch, useSelector } from "react-redux";
import http from "../../../http";
import { setType } from "../../../store/features/friend";

export const AddFriendModel: React.FC<any> = ({ visibleAdd, setVisibleAdd, userInfo,sendFind }) => {

    const [text, setText] = useState<string>("");

    const dispatch = useDispatch();

    const { user } = useSelector((state: any) => state.user.value);


    const addFriendHttp = async () => {
        const response: any = await http.post(`/friend/add?friendId=${userInfo.userId}&reason=${text == "" ? `我是${user.nickName}` : text}`)
        if (response.code == 200) {
            setVisibleAdd(false);
            Message.success("发送成功");
            if(sendFind){
                sendFind();
            }
        } else {
            Message.error(response.msg);
        }

    }


    return <Modal
        style={{ boxShadow: '0px 2px 10px rgba(0, 0, 0, 0.10)' }}
        className={`"shadow-2xl w-[500px] border border-gray-100 p-[12px] rounded-2xl bg-yellow-100"`}
        title={null}
        visible={visibleAdd}
        onCancel={() => setVisibleAdd(false)}
        footer={null}
        closeIcon={null}
    >

        <div className="px-4 py-2">
            <div className="w-full flex flex-row justify-between  items-center">
                <span className="text-[18px] font-bold">添加好友</span>
                <span className=" cursor-pointer" onClick={() => setVisibleAdd(false)}>
                    <IconClose className="text-[20px] font-bold"></IconClose>
                </span>
            </div>
            <div className=" flex flex-row  items-center cursor-pointer border border-r-gray-300  p-3 rounded-xl mt-4">
                <LeoAvatar size={50} userPortrait={userInfo.userPortrait} userName={userInfo.nickName} ></LeoAvatar>
                <div className="flex flex-col h-[50px] justify-center items-start ml-2">
                    <span className="max-w-[160px] text-ellipsis overflow-hidden text-[18px]  text-black">{userInfo.nickName}
                        {
                            userInfo.gender == "MALE" && <IconUser className=" ml-1 text-blue-600" />
                        }

                        {
                            userInfo.gender == "FEMALE" && <IconUser className=" ml-1 text-red-400" />
                        }
                    </span>
                    <span className="max-w-[160px] text-ellipsis overflow-hidden text-[14px]  text-gray-400">地区: {userInfo.provinceCity}</span>
                </div>
            </div>
            <div className="flex flex-row mt-4">
                <Input onChange={(value) => {
                    setText(value)
                }} defaultValue={`我是${user.nickName}`} maxLength={30} showWordLimit={true}></Input>
                <Button type="primary" className='ml-2' onClick={addFriendHttp}>发送</Button>
            </div>
        </div>


    </Modal>;
}